﻿<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>流程图DEMO</title>
    <!--[if lt IE 9]>
    <?import namespace="v" implementation="#default#VML" ?>
    <![endif]-->
    @*flow*@
    <script src="~/js/lib/flow/child.js"></script>
    <script type="text/javascript" src="~/js/lib/flow/plugin/jquery.min.js"></script>
    <script type="text/javascript" src="~/js/lib/flow/codebase/GooFunc.js"></script>
    <script type="text/javascript" src="~/js/lib/flow/plugin/json2.js"></script>
    <link href="~/css/flow/default.css" rel="stylesheet" />
    <script type="text/javascript" src="~/js/lib/flow/codebase/GooFlow.js"></script>
    <script type="text/javascript" src="~/js/lib/flow/codebase/GooFlow.color.js"></script>
    <link href="~/js/lib/flow/codebase/GooFlow.css" rel="stylesheet" />
    @*layer*@
    <link href="~/js/lib/layui/dist/css/layui.css" rel="stylesheet" />
    <script src="~/js/lib/layui/dist/layui.js"></script>
    <style>
        .myForm {
            display: block;
            margin: 0px;
            padding: 0px;
            line-height: 1.5;
            border: #ccc 1px solid;
            font: 12px Arial, Helvetica, sans-serif;
            margin: 5px 5px 0px 0px;
            border-radius: 4px;
        }

            .myForm .form_title {
                background: #428bca;
                padding: 4px;
                color: #fff;
                border-radius: 3px 3px 0px 0px;
            }

            .myForm .form_content {
                padding: 4px;
                background: #fff;
            }

                .myForm .form_content table {
                    border: 0px
                }

                    .myForm .form_content table td {
                        border: 0px
                    }

                    .myForm .form_content table .th {
                        text-align: right;
                        font-weight: bold
                    }

            .myForm .form_btn_div {
                text-align: center;
                border-top: #ccc 1px solid;
                background: #f5f5f5;
                padding: 4px;
                border-radius: 0px 0px 3px 3px;
            }

        #propertyForm {
            float: right;
            width: 260px
        }
    </style>
    <script type="text/javascript">
        var property = {
            width: 1072,
            height: 600,
            toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"],
            haveHead: true,
            headBtns: ["new", "open", "save", "undo", "redo", "reload"],//如果haveHead=true，则定义HEAD区的按钮
            haveTool: true,
            haveGroup: true,
            useOperStack: true
        };
        var remark = {
            cursor: "选择指针",
            direct: "结点连线",
            start: "入口结点",
            "end": "结束结点",
            "task": "任务结点",
            node: "自动结点",
            chat: "决策结点",
            state: "状态结点",
            plug: "附加插件",
            fork: "分支结点",
            "join": "联合结点",
            "complex mix": "复合结点",
            group: "组织划分框编辑开关"
        };
        var demo;
        $(document).ready(function () {
            demo = $.createGooFlow($("#demo"), property);
            demo.setNodeRemarks(remark);
            demo.onItemDel = function (id, type) {
                if (confirm("确定要删除该单元吗?")) {
                    this.blurItem();
                    return true;
                } else {
                    return false;
                }
            }
            demo.loadData(jsondata);
            demo.onItemFocus = function (id, model) {
                var obj;
                //obj = this.$lineData[id];
                //var ddd = obj;
                $("#ele_model").val(model);
                $("#ele_id").val(id);
                if (model == "line") {
                    obj = this.$lineData[id];
                    $("#ele_type").val(obj.M);
                    $("#ele_left").val("");
                    $("#ele_top").val("");
                    $("#ele_width").val("");
                    $("#ele_height").val("");
                    $("#ele_from").val(obj.from);
                    $("#ele_to").val(obj.to);
                } else if (model == "node") {
                    obj = this.$nodeData[id];
                    $("#ele_type").val(obj.type);
                    $("#ele_left").val(obj.left);
                    $("#ele_top").val(obj.top);
                    $("#ele_width").val(obj.width);
                    $("#ele_height").val(obj.height);
                    $("#ele_from").val("");
                    $("#ele_to").val("");
                    $("#ele_chenjie").val(obj.chenjie);
                }
                $("#ele_name").val(obj.name);
                return true;
                //layui.use('layer', function () {
                //    layer.open({
                //        type: 2,
                //        title: "新建用户",
                //        area: ['500px', '550px'],
                //        fixed: false, //不固定
                //        maxmin: true,
                //        shade: 0, //不遮挡
                //        id: 'addUser',//防止重复弹出
                //        content: '/User/AddUser',
                //        success: function (layero, index) {
                //            //layer.full(index);  //打开时最大化
                //        }
                //    });
                //})
            };
            demo.onItemBlur = function (id, model) {
                document.getElementById("propertyForm").reset();
                return true;
            };
            //demo.onItemAdd = function (id, type,json) {
            //    layer.open({
            //        type: 2,
            //        title: "新建用户",
            //        area: ['500px', '550px'],
            //        fixed: false, //不固定
            //        maxmin: true,
            //        shade: 0, //不遮挡
            //        id: 'addUser',//防止重复弹出
            //        content: '/User/AddUser',
            //        success: function (layero, index) {
            //            //layer.full(index);  //打开时最大化
            //        }
            //    });
            //}

            demo.onItemRename = function (id, type) {
                layui.use('layer', function () {
                    layer.open({
                        type: 2,
                        title: "新建用户",
                        area: ['500px', '550px'],
                        fixed: false, //不固定
                        maxmin: true,
                        shade: 0, //不遮挡
                        id: 'addUser',//防止重复弹出
                        content: '/User/AddUser',
                        success: function (layero, index) {
                            //layer.full(index);  //打开时最大化
                        }
                    });
                })
            };
        });
        var out;
        function Export() {
            document.getElementById("result").value = JSON.stringify(demo.exportData());
        }

    </script>
</head>
<body style="background:#EEEEEE">
    <div id="demo" style="margin:5px;float:left"></div>
    <form class="myForm" id="propertyForm">
        <div class="form_title">属性设置</div>
        <div class="form_content">
            <table>
                <tr><td class="th">Id：</td><td><input type="text" style="width:120px" id="ele_id" /></td></tr>
                <tr><td class="th">Name：</td><td><input type="text" style="width:120px" id="ele_name" /></td></tr>
                <tr><td class="th">Type：</td><td><input type="text" style="width:120px" id="ele_type" /></td></tr>
                <tr><td class="th">Model：</td><td><input type="text" style="width:120px" id="ele_model" /></td></tr>
                <tr><td class="th">Left-r：</td><td><input type="text" style="width:120px" id="ele_left" /></td></tr>
                <tr><td class="th">Top-r：</td><td><input type="text" style="width:120px" id="ele_top" /></td></tr>
                <tr><td class="th">Width：</td><td><input type="text" style="width:120px" id="ele_width" /></td></tr>
                <tr><td class="th">Height：</td><td><input type="text" style="width:120px" id="ele_height" /></td></tr>
                <tr><td class="th">From：</td><td><input type="text" style="width:120px" id="ele_from" /></td></tr>
                <tr><td class="th">To：</td><td><input type="text" style="width:120px" id="ele_to" /></td></tr>
                <tr><td class="th">chenjie：</td><td><input type="text" style="width:120px" id="ele_chenjie" /></td></tr>
            </table>
        </div>
        <div class="form_btn_div">
            <input type="reset" value="重置" />
            <input type="button" value="确定" onclick="alert(demo.$focus)" />
        </div>
    </form>
    <div style="clear:both">
        <input id="submit" type="button" value='导出结果' onclick="Export()" />
<textarea id="result" row="6"></textarea>
    </div>
</body>
</html>
